<template>
	<view class="lists">
		<view class="lists_content">
			<view :class="listinfos==0?'addclass':''" @click="hange()"><text >销量优先</text></view>
			<view class="upgrade"  @click="upchange()" :class="listinfos==1?'addclass':''">
				<text>价格</text>
				<view class="upgrade_name">
					<view :class="listinfo==0?'status':''">^</view>
					<text :class="listinfo==1?'status':''">^</text>
				</view>
			</view>
		</view>
		<view class="lists_bottom">
			<view class="bottom_content">
				<view class="guess_section">
					<view class="guess_item" v-for="(item,index) in items" @click="particulars(item.id)">
						<view class="image_wrapper">
							<image :src="item.img"></image>
						</view>
						<view class="guess_bottom">
							<view class="guess_bottomName">{{item.title}}</view>
							<view class="guess_bottomText">
								<view>￥{{item.price/100}}</view>
								<view style="color: #C0C4CC;">已售{{item.sales}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addData:[
					{label:"销量优先"},
					{label:"价格"}
				],
				Token: '',
				items: [],
				listinfos:0,
				listinfo: 0 //获取到后台提供的值
			}
		},
		onLoad(e) {
			var add=e.title
			var id=e.id
			console.log(e)
			uni.request({
				url: this.$C.webUrl+`m.api?_gp=goods&_mt=getGoodsPage`,
				success: (res) => {
					this.items = res.data.data.items
				},
				data:{
					title:add||"",
					categoryId:id||''
				}
			})
		},
		methods: {
			particulars(e){
				uni.navigateTo({
					url:'../detail/index?id='+e
				})
			},
			hange(){
				this.listinfos=0
			},
			// 升序降序
			upchange() {
				this.listinfos=1
				let arr = [];
				let items = this.items
				this.items = arr
				for (let i in items) {
					arr.push(items[i])
				}
				if(this.listinfo==0){
					this.listinfo=1
					arr.sort(function(a, b) {
						return a.price - b.price //排序基于的数据
					})
				}else{
					this.listinfo=0
					arr.sort(function(a, b) {
						return b.price - a.price //排序基于的数据
					})
				}
				
			}
		}
	}
</script>

<style>
	.lists {
		width: 100%;
		height: 100%;
	}
.addclass{
	height: 50px;
	color: #DD524D;
}
.status{
	color: #DD524D;
}
	.lists_content {
		width: 100%;
		height: 100upx;
		display: flex;
		justify-content: space-around;
		border-bottom: 5px solid #ECECEC;
	}

	.lists_bottom {
		width: 100%;
		height: 85.9vh;
		background: #ECECEC;
	}

	.bottom_content {
		width: 100%;
		height: auto;
		background: #FFFFFF;
	}

	/*  */
	.guess_section {
		/* padding: 0 15px; */
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 1200upx;
		background: #fff;

	}

	.guess_section .guess_item {
		width: 50%;
		/* height: 25%; */
	}

	.guess_bottomName {
		width: 300upx;
		margin-left: 30upx;
		font-size: 30upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*让文本强制在一行不换行*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
	}

	.image_wrapper {
		width: 90%;
		height: 350upx;
	}

	.guess_bottomText {
		width: 345upx;
		color: #FF0000;
		font-size: 30upx;
		display: flex;
		justify-content: space-around;
	}

	.guess_content {
		width: 48%;

	}

	.image_wrapper image {
		width: 100%;
		height: 82%;
	}

	.upgrade {
		width: 200upx;
		height: 40upx;
		display: flex;
		position: relative;
	}

	.upgrade_name text {
		width: 20upx;
		position: absolute;
		top: 12upx;
		margin-left: 9.9upx;
		transform: rotate(180deg);
	}
</style>
